<template>
    <header>
        <div class="fenlei">
            <img src="@/assets/images/fenlei.png" alt="分类">
        </div>
        <div class="search" @click="goSearch">
            <i class="iconfont icon-fangdajing"></i>
            <span>学院风jk套装</span>
        </div>
        <div class="liaotian">
            <i class="iconfont icon-weixin1"></i>
        </div>
    </header>
</template>

<script setup> 
    import { useRouter } from 'vue-router'
    const router = useRouter()
    const goSearch = () => {
        // 路由跳转
        router.push('/search')
    }
</script>

<style scoped>  
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 1.2rem;
    padding: 0.2rem 0.1rem;
    background-color: #fff;
    border-bottom:  1px solid #ccc;
    box-sizing:border-box;
}
header .fenlei img{
    width: 0.7rem;
    height: 0.7rem;
    line-height: 0.7rem;
    margin-top: 0.1rem;
}
header .search{
    width: 80%;
    height: 1rem;
    font-size: 0.3rem;
    color: #999;
    background-color: #eee;
    border-radius: 0.1rem;
}
header .search i{
    margin: 0 0.2rem;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
}
header .search span{
    line-height: 1rem;
    font-size: 0.3rem;
}
header .liaotian i{
    font-size: 0.7rem;
    line-height: 1rem;
    margin-right: 0.1rem;
    color: #999;
}
</style>